<template>
  <section class="explore-section" v-if="exploreItems.length > 0">
    <div class="explore-container">
      <div class="explore-header">
        <div class="title-container">
          <h2 class="title">Company</h2>
          <h2 class="title title2">Information</h2>
          <p class="subtitle">The company culture display<br /> area is available for your viewing.</p>
        </div>
      </div>

      <div class="explore-content">
        <swiper :modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]" :slides-per-view="slidesPerView"
          :space-between="20" :loop="true" :pagination="{ clickable: true }" :navigation="true" :autoplay="{
            delay: 5000,
            disableOnInteraction: false
          }" class="explore-swiper">
          <swiper-slide v-for="(item, index) in exploreItems" :key="index" style="max-width: 496px;">
            <div class="explore-card">
              <a :href="item.link" class="card-link">
                <div class="image-wrapper">
                  <img :src="item.image" style="aspect-ratio: 3/6;" :alt="item.title" class="explore-image">
                  <div class="overlay">
                    <h3 class="card-title">{{ item.title }}</h3>
                  </div>
                </div>
              </a>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </section>
</template>

<script lang="ts" setup>
import { ref, defineProps, computed, onMounted } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import { useWindowSize } from '@vueuse/core';
import { getnav, getnavList } from '@/api/blog'

// 定义道具接口
interface ExploreItem {
  title: string;
  image: string;
  link: string;
}

// Swiper模块
const SwiperAutoplay = Autoplay;
const SwiperPagination = Pagination;
const SwiperNavigation = Navigation;

// 响应式窗口大小
const { width } = useWindowSize();

// 根据窗口宽度计算slidesPerView
const slidesPerView = computed(() => {
  if (width.value < 576) return 1;
  if (width.value < 992) return 2;
  return 3;
});

// 探索项数据
const exploreItems = ref<ExploreItem[]>([
  {
    title: 'LUXURY',
    image: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530161455/20250530161455_683968ffdd0e0.webp',
    link: '/story'
  },
  {
    title: 'COLLECTION',
    image: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530161512/20250530161512_6839691079975.webp',
    link: '/story'
  },
  {
    title: 'RELAX',
    image: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530161534/20250530161534_68396926d71ea.webp',
    link: '/story'
  },
  {
    title: 'JEANS',
    image: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530161549/20250530161549_68396935584b2.webp',
    link: '/story'
  },
]);

//博客导航
const getnavFn = async () => {
  // const res = await getnavList(0, 2)
  // if (res.code === 200) {
    const res = (window as any).__INITIAL_INDEX__.homeExplore
    if (res?.length > 0 && res[0].list?.length > 0) {
      exploreItems.value = res[0].list
        .map(item => ({
          image: item.thumbnail,
          title: item.title,
          link: '/blog-left-menu'
        })) 
      // mainGift.value = {
      //   image: res.data[0].list[0].thumbnail,
      //   title: res.data[0].list[0].title,
      //   subtitle: res.data[0].list[0].subtitle,
      //   link: '/blog-left-menu',
      //   buttonText: 'EXPLORE'
      // }
    }
  // }
}

onMounted(() => {
  // getnavFn()
})
</script>

<style scoped lang="scss">

.explore-section {
  // padding: 80px 0;
  // padding-top: 60px;
  background-color: #fff;
}

.explore-container {
  // max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
}

.explore-header {
  margin-bottom: 60px;
  flex: 1;
}

.title-container {
  // max-width: 320px;
  padding-left: 10%;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  height: 100%;

  .title {
    font-size: 42px;
    line-height: 1.1;
    margin-bottom: 15px;
    font-weight: 500;
    color: #000;
  }

  .title2 {
    font-size: 62px;
  }

  .subtitle {
    color: #1d1c20;
    font-weight: 400;
    display: block;
    line-height: 1.5;
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 20px;
    margin-top: 60px;

  }
}


.explore-content {
  width: 68%;
  // flex: 2;
}

.explore-swiper {
  width: 100%;
  padding-bottom: 50px;
  /* 为分页器留出空间 */
}

:deep(.swiper-pagination) {
  bottom: 0;
}

:deep(.swiper-pagination-bullet) {
  width: 10px;
  height: 10px;
  background-color: #000;
  opacity: 0.3;
}

:deep(.swiper-pagination-bullet-active) {
  opacity: 1;
}

:deep(.swiper-button-next),
:deep(.swiper-button-prev) {
  color: #000;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  top: 44%;
  &:after {
    font-size: 16px;

  }
}

.explore-card {
  width: 100%;
  position: relative;
  max-width: 496px;
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.image-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 130%;
  /* Aspect ratio 4:5 */
  overflow: hidden;
}

.explore-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  color: #fff;
  transition: opacity 0.3s ease;
}

.card-title {
  font-size: 24px;
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.5px;
}

.card-link:hover .explore-image {
  transform: scale(1.05);
}

/* 移动端适配 */
@media (max-width: 992px) {
  .explore-section {
    padding: 60px 0;
  }

  .title {
    font-size: 36px;
  }

  .subtitle {
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .explore-section {
    padding: 40px 0;
  }

  .explore-header {
    margin-bottom: 40px;
  }

  .title {
    font-size: 32px;
  }

  .card-title {
    font-size: 20px;
  }
}

@media (max-width: 576px) {
  .explore-section {
    padding: 30px 0;
  }

  .title-container {
    max-width: 100%;
  }

  .title {
    font-size: 28px;
  }

  .subtitle {
    font-size: 14px;
  }

  .explore-header {
    margin-bottom: 30px;
  }

  :deep(.swiper-button-next),
  :deep(.swiper-button-prev) {
    display: none;
  }
}
</style>